<template>
	<!-- 分页页面 -->
	<view class="container">
		<!-- 搜索框 -->
		<view class="index-search-box">
			<navigator class="index-search " hover-class="none" openType="navigate" url="../search/search">
				<view class="index-cont-search t-c">
					<!-- <icon class="text-center" :color="searchColor" :size="searchSize" type="search" /> -->
					<text class="iconfont icon-sousuo f-30"></text>
					<text>{{searchName}}</text>
				</view>
			</navigator>
		</view>

		<!-- 分类样式：一级分类(大图) 10 -->
		<view class="cate-content" v-if="templet.category_style == 10 && list !== undefined && list.length >0">
			<view class="cate-wrapper cate_style__10">
				<scroll-view scroll-y="true" :style="[{'height': height }]">
					<view class="cate-item" v-for="(item,index) in list" :key="index">
						<navigator hover-class="none" :url="'list?category_id='+item.category_id">
							<image mode="widthFix" :src="item.image.file_path"></image>
						</navigator>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 分类样式：一级分类(小图) 11 -->
		<view class="cate-content" v-else-if=" templet.category_style == 11 && list !== undefined && list.length >0 ">
			<view class="cate-wrapper cate_style__11">
				<scroll-view class="clear" scroll-y="true" :style="[{'height': height }]">
					<view class="cate-item" v-for="(item,index) in list" :key="index">
						<navigator hover-class="none" :url="'list?category_id='+item.category_id">
							<image mode="widthFix" :src=" item.image.file_path"></image>
							<text class="f-26">{{ item.name }}</text>
						</navigator>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 分类样式：二级分类 20 -->
		<view class="cate-content dis-flex" v-else-if=" templet.category_style == 20 && list !== undefined && list.length >0 ">

			<!-- 左侧 一级分类 -->
			<scroll-view class="cate-left f-28" scroll-y="true" :style="[{'height': height }]">
				<text @tap="selectNav" class="type-nav " :class="curNav == item.category_id?'selected':''" :data-id="item.category_id"
				 :data-index="index" v-for="(item,index) in list" :key="index">{{ item.name }}</text>
			</scroll-view>

			<!-- 右侧 二级分类 -->
			<scroll-view class="cate-right b-f" scroll-top="scrollTop" scroll-y="true" :style="[{'height': height }]">
				<!-- <view v-if="list[curIndex]"> -->
				<view v-if="list[curIndex]">
					<view class="cate-right-cont">
						<view class="cate-two-box">
							<view class="cate-cont-box">
								<view class="flex-three" data-list="index" v-for="(item,index) in list[curIndex].child" :key="item.category_id">
									<navigator hover-class="none" :url="'list?category_id='+item.category_id">
										<view class="cate-img" :id="item.file_id">
											<image :src="item.image.file_path"></image>
										</view>
										<text>{{ item.name }}</text>
									</navigator>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view v-if=" !list.length && notcont">
			<view class="yoshop-notcont">
				<text class="iconfont icon-wushuju"></text>
				<text class="cont">亲，暂无商品分类哦</text>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		computed: {
			height() {
				return uni.upx2px((this.scrollHeight - 10) * 2) + 'px';
			}
		},
		data() {
			return {
				// 搜索框样式
				searchColor: "rgba(0,0,0,0.4)",
				searchSize: "15",
				searchName: "搜索商品",
				// 列表高度
				scrollHeight: 0,
				// 一级分类：指针
				curNav: true,
				curIndex: 0,
				// 分类列表
				list: {},
				templet: {},
				scrollTop:0,
				// show
				notcont: false
			}
		},
		onLoad: function() {
			let _this = this;
			// 设置分类列表高度
			_this.setListHeight();
			// 获取分类列表
			this.getCategoryList();
		},

		methods: {
			/**
			 * 设置分类列表高度
			 */
			setListHeight: function() {
				let _this = this;
				uni.getSystemInfo({
					success: function(res) {
						_this.setData({
							scrollHeight: res.windowHeight - 47,
						});
					}
				});
			},

			getCategoryList: function() {
				let _this = this;
				this._get('category/index', {}, function(result) {
					let data = result.data;
					_this.setData({
						list: data.list,
						templet: data.templet,
						curNav: data.list.length > 0 ? data.list[0].category_id : true,
						notcont: !data.list.length
					});
				});
			},

			/**
			 * 一级分类：选中分类
			 */
			selectNav(e) {
				// console.log(e.target.dataset)
				this.setData({
					curNav:e.target.dataset.id,
					curIndex:parseInt(e.target.dataset.index),
					scrollTop: 0
				});
			},

			/**
			 * 设置分享内容
			 */
			onShareAppMessage: function() {
				let templet = this.data.templet;
				return {
					title: templet.share_title,
					path: "/pages/category/index?referee_id=" + this.getUserId()
				};
			}



		}
	}
</script>

<style>
	/* common.wxss */
	@import url("../../utils/common.scss");

	/* 搜索框 */
	.index-cont-search .iconfont {
		margin: 10upx;
		font-size: 15px;
	}

	.index-cont-search text {
		margin: -1upx;
	}

	.index-search-box {
		background: #fff;
		padding: 13upx 13upx 18upx 13upx;
	}

	.index-search {
		border-bottom: 0;
		background: #fff;
		border-radius: 50upx;
		overflow: hidden;
		position: relative;
		font-size: 28upx;
		color: #999;
		box-sizing: border-box;
		height: 64upx;
		line-height: 64upx;
	}

	/* 通用 */

	page {
		background: #fff;
	}

	.cate-content {
		background: #fff;
	}

	.cate-wrapper {
		padding: 0 20upx 20upx 20upx;
		box-sizing: border-box;
	}

	/* 一级分类(大图) 10 */

	.cate_style__10 .cate-item {
		margin-bottom: 18upx;
	}

	.cate_style__10 .cate-item:last-child {
		margin-bottom: 0;
	}

	.cate_style__10 .cate-item image {
		display: block;
		width: 100%;
		height: auto;
	}

	/* 一级分类(小图) 11 */

	.cate_style__11 .cate-item {
		float: left;
		padding: 25upx;
		width: 33.3333%;
		text-align: center;
		box-sizing: border-box;
	}

	.cate_style__11 .cate-item image {
		/* height: 208.656upx; */
		width: 100%;
		display: block;
	}

	.cate_style__11 .cate-item image {
		/* height: 208.656upx; */
		display: block;
		width: 100%;
		margin-bottom: 10upx;
	}

	.cate_style__11 .cate-item text {
		display: block;
		color: #555;
	}

	/* 二级分类 20 */

	.cate-content {
		width: 100%;
	}

	.cate-left {
		flex-direction: column;
		display: flex;
		width: 200upx;
		color: #444;
		height: 100%;
		background: #f8f8f8;
	}

	.cate-right {
		display: flex;
		flex-direction: column;
		width: 550upx;
		height: 100%;
		overflow: hidden;
	}

	.cate-right-cont {
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		align-content: flex-start;
		padding-top: 26upx;
	}

	.type-nav {
		position: relative;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		z-index: 10;
		display: block;
		font-size: 26upx;
	}

	.type-nav.selected {
		background: #fff;
		color: #ff495e;
		border-right: none;
		font-size: 28upx;
	}

	.cate-cont-box {
		margin-bottom: 30upx;
		padding-bottom: 10upx;
		background: #fff;
		overflow: hidden;
	}

	.cate-cont-box .cate-img {
		padding: 13upx 10upx 4upx 10upx;
	}

	.cate-cont-box .cate-img image {
		width: 100%;
		height: 150upx;
	}

	.cate-cont-box text {
		text-align: center;
		display: block;
		font-size: 26upx;
		padding-bottom: 14upx;
		color: #444;
		padding: 0 15upx 30upx 15upx;
	}

	.cate-two-box {
		width: 100%;
		padding: 0 20upx;
	}
</style>
